<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="'/services/' + pkgId"></ion-back-button>
    </ion-buttons>
    <ion-title>Properties</ion-title>
    <ion-buttons *ngIf="!loading" slot="end">
      <ion-button (click)="refresh()">
        <ion-icon slot="start" name="refresh"></ion-icon>
        Refresh
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top with-widgets">
  <text-spinner
    *ngIf="loading; else loaded"
    text="Loading Properties"
  ></text-spinner>

  <ng-template #loaded>
    <!-- not running -->
    <ion-item *ngIf="stopped$ | async" class="ion-margin-bottom">
      <ion-label>
        <p>
          <ion-text color="warning">
            Service is stopped. Information on this page could be inaccurate.
          </ion-text>
        </p>
      </ion-label>
    </ion-item>

    <!-- no properties -->
    <ion-item *ngIf="properties | empty">
      <ion-label>
        <p>No properties.</p>
      </ion-label>
    </ion-item>

    <!-- properties -->
    <ion-item-group *ngIf="!(properties | empty)">
      <div *ngFor="let prop of node | keyvalue: asIsOrder">
        <!-- object -->
        <ion-item
          button
          detail="true"
          *ngIf="prop.value.type === 'object'"
          (click)="goToNested(prop.key)"
        >
          <ion-button
            *ngIf="prop.value.description"
            fill="clear"
            slot="start"
            (click)="presentDescription(prop, $event)"
          >
            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
          </ion-button>
          <ion-label>
            <h2>{{ prop.key }}</h2>
          </ion-label>
        </ion-item>
        <!-- not object -->
        <ion-item *ngIf="prop.value.type === 'string'">
          <ion-button
            *ngIf="prop.value.description"
            fill="clear"
            slot="start"
            (click)="presentDescription(prop, $event)"
          >
            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
          </ion-button>
          <ion-label>
            <h2>{{ prop.key }}</h2>
            <p class="courier-new">
              {{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value |
              mask : 64) : prop.value.value }}
            </p>
          </ion-label>
          <div slot="end" *ngIf="prop.value.copyable || prop.value.qr">
            <ion-button
              *ngIf="prop.value.masked"
              fill="clear"
              (click)="toggleMask(prop.key)"
            >
              <ion-icon
                slot="icon-only"
                [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'"
                size="small"
              ></ion-icon>
            </ion-button>
            <ion-button
              *ngIf="prop.value.qr"
              fill="clear"
              (click)="showQR(prop.value.value)"
            >
              <ion-icon
                slot="icon-only"
                name="qr-code-outline"
                size="small"
              ></ion-icon>
            </ion-button>
            <ion-button
              *ngIf="prop.value.copyable"
              fill="clear"
              (click)="copy(prop.value.value)"
            >
              <ion-icon
                slot="icon-only"
                name="copy-outline"
                size="small"
              ></ion-icon>
            </ion-button>
          </div>
        </ion-item>
      </div>
    </ion-item-group>
  </ng-template>
</ion-content>
